<template>
  <div class="RoleSelectMultiple">
    <el-select-v2
        :size="size"
        v-model="showValue"
        style="width: 240px"
        multiple
        filterable
        remote
        :remote-method="querySearch"
        clearable
        :options="options"
        :loading="loading"
        :placeholder="showValue && showValue.length>0 ? '':'输入角色'"
    >
      <template #default="{ item }">
        <div style="display: flex;justify-content: flex-start;align-items: center;">
          <span>
            {{ item.roleName }}
        </span>
        </div>
      </template>
    </el-select-v2>
  </div>
</template>
<script setup name="RoleSelectMultiple">
import {listRoleByIds, queryRoleList} from "@/api/system/role.js";
import {isNotEmptyArray} from "@/views/flow/tool.js";
const props = defineProps({
  size: {
    type: String,
    default: 'small'
  },
  modelValue: {
    type: [String,
      Object,
      Array],
    default: () => []
  },
})
const emit = defineEmits(['update:modelValue'])
const showValue = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue',
        val)
  }
})
const loading = ref(false)
const options = ref([])
const setOptions = (res) => {
  options.value = res.data.map((res) => {
    return {
      ...res,
      label: res.roleName,
      value: res.roleId
    }
  })
}
onMounted(() => {
  //加上这个是为了反显出名字
  if (isNotEmptyArray(props.modelValue)) {
    listRoleByIds(props.modelValue)
        .then((res) => {
          setOptions(res);
        })
  }
})
const querySearch = (query,
) => {
  loading.value = true
  queryRoleList(query)
      .then((res) => {
        setOptions(res);
      })
      .finally(() => {
        loading.value = false
      })
}
</script>
<style scoped lang="scss">
.RoleSelectMultiple {
}
</style>
